

<template>
  <a-radio-group
    :defaultValue="defaultValue"
    :size="size"
    :value="selectTag"
    @change="change"
  >
    <a-radio-button
      v-for="item in tagList"
      :key="item.id"
      :value="item.name"
      :style="radioStyle"
    >
      {{ item.name }}
    </a-radio-button>
  </a-radio-group>
</template>

<script>
import { Radio } from 'ant-design-vue';

export default {
  name: 'CheckableTag',

  components: {
    ARadioGroup: Radio.Group,
    ARadioButton: Radio.Button
  },

  props: {
    // 标签列表
    tagList: {
      type: Array,
      default() {
        return []
      }
    },
    // radioButton样式
    radioStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    // 默认值
    defaultValue: undefined,
    // 按钮大小
    size: {
      type: String,
      default: 'default'
    },
    // 选中标签
    selectTag: {
      type: String,
      default: ''
    }
  },

  data() {
    return {

    }
  },

  methods: {
    change(event) {
      console.log(event);
      // 通知父组件改变tag
      this.$emit('checked', event.target.value);
    }
  },

  // render(h) {
  //   const radioButtons = this.tagList.map(item => {
  //     return h('a-radio-button', {
  //       props: {
  //         value: item.name
  //       },
  //       domProps: {
  //         innerHTML: item.name,
  //       }
  //     })
  //   })
  //   return h('a-radio-group', {
  //     props: {
  //       size: this.size,
  //       disabled: this.disabled
  //     },
  //     on: {
  //       change: (value) => {
  //         console.log(value);
  //       }
  //     }
  //   }, [...radioButtons]);
  // }
}
</script>

<style lang="less" scoped>
/deep/label.ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
  background-color: #fdf5f5 !important;
  color: #ec4141 !important;
  border-radius: 13px;
  box-shadow: none;
}
/deep/label.ant-radio-button-wrapper {
  border: none;
  height: 25px;
  line-height: 25px;
  &::before {
    display: none;
  }
  &:hover {
    color: #ec4141;
  }
  &:focus {
    background: unset !important;
    border-color: unset !important;
  }
}
</style>